<template>
  <div class="partContent">
    <div class="hasstudy" v-if="hasstudy">
      <div class="pSlider">
        <p class="pTitle">正在学习{{planCourse.length}}门课程</p>
      </div>
      <div class="swiper-container" id="investproSwiper" >
        <div class="swiper-wrapper" >
          <div class="swiper-slide" v-for="(item,index) in planCourse" :key="index">
            <a >
              <img :src=item.thumb
                   onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'" alt="">
            </a>
            <div class="dTitleWrap">
              <p class="dTitle">{{item.name}}</p>
              <div class="weui-progress">
                <div class="weui-progress__bar">
                  <div class="weui-progress__inner-bar js_progress" :style="{width: item.percent}"></div>
                </div>
              </div>
              <p class="dTitleDate">
                <span class="progress">完成{{item.percent}} | 剩余{{item.residue}}课时</span>
                <span class="deadLine">截止至{{item.last_time}}</span>
              </p>
            </div>
          </div>
        </div>
        <!--<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>-->
      </div>
    </div>

    <!--最新课程-->
    <div class="newsLesson">
      <div class="partSchool">
        <div class="title clearfix">
          <p class="left">
            最新课程
          </p>
          <a ><span class="right">全部</span></a>
        </div>
        <!--党校视频列表-->
        <div class="partVideoList">
          <router-link :to="{path:'/videoList',query:{class_id:item.id}}"   v-for="(item,index) in videoList" :key="index">
              <a  class="videoItem">
                <p class="videoItemTop">
                  <img :src=item.thumb alt="" onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
                  <span>
                      <img src="http://dangjian.co-links.com/Static/Home/images/videoPlay.jpg" alt="" >
                    </span>
                </p>
                <p class="videoItemMiddle">{{item.name}}</p>
                <p class="videoItemBottom">
                  <span>{{item.visit}}</span>
                </p>
              </a>
          </router-link>
        </div>
        <!--加载更多-->
        <div class="loadComponent">
          <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips" >正在加载</span>
          </div>
          <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
            <span class="weui-loadmore__tips">到底了</span>
          </div>
          <div class="loadMore" style="display:block" @click.stop="loadMore" v-if="moreData">
            更多
          </div>
        </div>
        <div id="loadingToast" v-if="showLoading">
          <div class="weui-mask_transparent"></div>
          <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState,mapMutations} from 'vuex'
export default({
  data(){
      return {
        videoList:[],
        nomoreData:false,
        loadmoreClick:false,
        moreData:true,
        showLoading:false,
        defaultPage:1,
        hasstudy:false,
        planCourse:[]
      }
  },
  mounted(){
    $('body').removeClass('active')
    this.initData(this.defaultPage)
    this.setpartDefault(0)
  },
  methods:{
    ...mapMutations(['setpartDefault']),
    loadMore (){
      this.loadmoreClick =!this.loadmoreClick
      this.moreData =false
      this.defaultPage ++
      this.initData()
    },
    initData(p){
        let that =this
      //正在学习的课程
      this.axios.get('/home/School/getUserClass?'+`${this.baseUrl}`,{
          params:{
              uid:this.uid||localStorage.getItem('uid'),
              type:1
          }
      }).then((res)=>{
          if(res.data.data.length==0){
              this.hasstudy =false
          }else{
            this.hasstudy =true
            this.planCourse = res.data.data
//            console.log(res.data)
          }
      })
        .then((res)=>{
          var swiper =new that.Swiper('.swiper-container',{
            autoplay:1000,
          })
        })
      //所有视频
      this.axios.get('/home/School/getClassList?'+`${this.baseUrl}`,{
        params:{
          cate_id:'all',
          p:this.defaultPage,
          pageSize:6
        }
      }).then((res)=>{
//          console.log(res.data.data)
          if(res.data.data.length>=0){
            if(this.loadmoreClick){
              this.loadmoreClick =false
              this.moreData =true
            }
            if(res.data.data.length ===0){
              this.nomoreData =true
              this.moreData =false
              this.loadmoreClick =false
            }
              this.videoList.push(...res.data.data)
          }
      })
      //所有课程
    }
  },
  computed:{
    ...mapState({
      uid:state =>state.app.loginState.uid,
      token:state=>state.app.loginState.token
    })
  }

})
</script>
<style scoped>
  .partContent{
    position: relative;
  }
  .pSlider{
    z-index:-1
  }
  .pTitle{
    /* height: 0.94rem; */
    line-height: 0.94rem;
    text-align: center;
    background: linear-gradient(#e32d2e,#fff);
    font-size: 0.32rem;
    color: white;
    font-weight: bold;
    padding-bottom: 1rem;
  }
  .partContent >>> .swiper-container{
    z-index:1;
    margin-top:-1rem;
    height: 5.3rem;
    width: 6.3rem;
  }
  .partContent >>> .swiper-container .swiper-slide{
    width: 6.3rem !important;
    height:100%;
    /*padding:  0 0.22rem;*/
    margin: 0 auto;
  }
  .partContent >>> .swiper-container .swiper-slide a {
    display: block;
      height: 160px;
  }
  .partContent >>> .swiper-container .swiper-slide-prev img,
  .partContent >>> .swiper-container .swiper-slide-next img {
    width: 100%;
    height: 3rem;
    margin-top:0.1rem ;
  }
  .partContent >>> .swiper-container .swiper-slide img{
    border-radius: 0.14rem;
    -webkit-border-radius: 0.14rem;
  }
  .partContent >>> .swiper-container .swiper-slide-active img{
    height: 3.2rem;
    width: 100%;
  }
  .weui-progress {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .weui-progress__bar {
    background-color: #EBEBEB;
    height: 6px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    border-radius: 4px;
    -webkit-border-radius: 4px;
  }
  .weui-progress__inner-bar {
    width: 0;
    height: 100%;
    background-color: #e32b2c;
    border-radius: 4px;
    -webkit-border-radius: 4px;
  }
  .dTitle{
    padding-top: 0.47rem;
    padding-bottom: 0.2rem;
    color: #000000;
    font-size: 0.32rem;
    font-weight: bold;
    margin: 0.15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.3rem;
    line-height: 0.45rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .dTitleDate{
    margin-top: 0.12rem;
  }
  .dTitleDate .progress{
    font-size: 0.26rem;
    color: #000000;
    float: left;

  }
  .dTitleDate .deadLine{
    font-size: 0.22rem;
    color: #999999;
    float: right;
  }
  .newsLesson{
    margin-top: 0.2rem;
    padding: 0 0.32rem;
    background: white;
    z-index: 999;

  }
  .title{
    padding-top: 0.3rem;
    height: 0.6rem;
    line-height: 0.6rem;
  }
  .title .left{
    font-size: 0.36rem;
    color: #333333;
    font-weight: bold;
    position: relative;
    padding-left: 0.63rem;

  }
  .title .left:after{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    width: 0.45rem;
    height: 0.41rem;
    background-image: url("../../../static/images/star.png");
    background-size: 0.45rem 0.41rem;
    background-repeat: no-repeat;
    margin-top: -0.2rem;

  }
  .title .right{
    font-size: 0.26rem;
    color: #e32b2c;
  }
  .partVideoList{
    font-size: 0;
  }
  .loadComponent{
    padding-bottom:0.4rem
  }
  .videoItem{
    display: inline-block;
    width: 3.3rem;
    padding: 0.2rem 0;
  }
  .videoItem:nth-child(odd){
    margin-right: 0.1rem;
  }
  .videoItem:nth-child(even){
    margin-left: 0.1rem;
  }
  .videoItem .videoItemTop{
    position: relative;
    height: 2rem;
    overflow: hidden;
  }
  .videoItem .videoItemTop>img{
    display: inline-block;
    width: 100%;
    height: 2rem;

  }
  .videoItem .videoItemTop span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0.52rem;
    height: 0.52rem;
  }
  .videoItem .videoItemMiddle{
    font-size: 0.3rem;
    color: #333333;
    margin: 0.15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 0.6rem;
    height: 0.9rem;
    line-height: 0.45rem;
  }
  .videoItem .videoItemBottom{
    font-size: 0.26rem;
    color: #999999;
    padding-left: 0.5rem;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .videoItem .videoItemBottom:before{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    width: 0.36rem;
    height: 0.28rem;
    background-image: url("../../../static/images/eyes.png");
    background-size: 0.36rem 0.28rem;
    background-repeat: no-repeat;
    margin-top: -0.15rem;
  }
</style>
